<clr-modal [(clrModalOpen)]="deleteModal" [clrModalSize]="'lg'">
  <h3 class="modal-title">确认删除</h3>
  <div class="modal-body">
    <p>删除操作不可恢复,确认要删除主机:
      <span *ngFor="let host of selectedHosts">&nbsp;{{host.name}}</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="deleteModal = false">取消</button>
    <button type="button" class="btn btn-primary" (click)="confirmDelete()">确认</button>
  </div>
</clr-modal>
<app-host-info [(showInfoModal)]=showHostInfo (updated)="refresh()"></app-host-info>
<clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="selectedHosts" (clrDgSelectedChange)="canSelectedHostsDelete()">
  <clr-dg-action-bar>
    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-secondary" (click)="addNewHost()">
        <clr-icon shape="plus" size="16"></clr-icon>
        添加
      </button>
      <button type="button" class="btn btn-sm btn-secondary"
              [disabled]="selectedHosts.length == 0 || !canSelectedHostsDelete()"
              (click)="onDeleted()">
        <clr-icon shape="close"></clr-icon>
        删除
      </button>
    </div>
    <button type="button" class="btn btn-sm btn-secondary" (click)="importNewHost()">
      导入
    </button>
  </clr-dg-action-bar>
  <clr-dg-column>名称</clr-dg-column>
  <clr-dg-column>集群</clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden:true}">
      区域
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden:true}">
      可用区
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>IP 地址</clr-dg-column>
  <clr-dg-column>CPU(核)</clr-dg-column>
  <clr-dg-column>内存(MB)</clr-dg-column>
  <clr-dg-column>GPU(个)</clr-dg-column>
  <clr-dg-column>操作系统</clr-dg-column>
  <clr-dg-column>状态</clr-dg-column>


  <clr-dg-row *clrDgItems="let host of hosts" [clrDgItem]="host">
    <clr-dg-cell style="cursor: pointer;color: #0079b8">
      <a (click)="openInfo(host)">{{host.name}}</a>
      &nbsp;<img *ngIf="host.gpus.length>0" src="assets/images/nvidia.ico" height="24px" width="24px">
    </clr-dg-cell>
    <clr-dg-cell>{{getValueOrNone(host.cluster)}}</clr-dg-cell>
    <clr-dg-cell>{{getValueOrNone(host.region)}}</clr-dg-cell>
    <clr-dg-cell>{{getValueOrNone(host.zone)}}</clr-dg-cell>
    <clr-dg-cell>{{host.ip}}</clr-dg-cell>
    <clr-dg-cell>{{host.cpu_core}}</clr-dg-cell>
    <clr-dg-cell>{{host.memory}}</clr-dg-cell>
    <clr-dg-cell>{{host.gpus.length}}</clr-dg-cell>
    <clr-dg-cell>{{host.os}} {{host.os_version}}</clr-dg-cell>
    <clr-dg-cell [ngStyle]="{'color': host.status | statusColor }">{{host.status | status}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    <clr-dg-column-toggle>
      <clr-dg-column-toggle-title>显示列</clr-dg-column-toggle-title>
      <clr-dg-column-toggle-button>全部</clr-dg-column-toggle-button>
    </clr-dg-column-toggle>
    <clr-dg-pagination #pagination [clrDgPageSize]=size [clrDgTotalItems]="total" (clrDgPageChange)="listHost()">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">每页</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      总共 {{pagination.totalItems}} 主机
    </clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

